<template>
  <div class="canvas-container">
    <canvas ref="canvasRef" width="800" height="600"></canvas>
    <div class="image-inputs">
      <div class="input-group">
        <label>图片1：</label>
        <input type="file" @change="handleImage1Upload" accept="image/*">
      </div>
      <div class="input-group">
        <label>图片2：</label>
        <input type="file" @change="handleImage2Upload" accept="image/*">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const canvasRef = ref(null)
const image1 = new Image()
const image2 = new Image()

const drawImages = () => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 如果图片已加载，则绘制
  if (image1.complete) {
    // 在左半边绘制第一张图片
    ctx.drawImage(image1, 0, 0, canvas.width / 2, canvas.height)
  }
  
  if (image2.complete) {
    // 在右半边绘制第二张图片
    ctx.drawImage(image2, canvas.width / 2, 0, canvas.width / 2, canvas.height)
  }
}

const handleImage1Upload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      image1.src = e.target.result
      image1.onload = drawImages
    }
    reader.readAsDataURL(file)
  }
}

const handleImage2Upload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      image2.src = e.target.result
      image2.onload = drawImages
    }
    reader.readAsDataURL(file)
  }
}

onMounted(() => {
  // 初始化Canvas
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  // 设置背景色
  ctx.fillStyle = '#f0f0f0'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
})
</script>

<style scoped>
.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

canvas {
  border: 2px solid #333;
  background: #f0f0f0;
}

.image-inputs {
  display: flex;
  gap: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-weight: bold;
}
</style> 